﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎登录后台管理系统</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="./bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <!-- 这个jquery版本低 -->
    <!--<script language="JavaScript" src="js/jquery.js"></script>-->
    <script src="js/cloud.js" type="text/javascript"></script>
    <script type="text/javascript" src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <script language="javascript">
        $(function(){
            $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
            $(window).resize(function(){
                $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
            })
        });

        //商家注册的提交按钮，点击的时候执行的函数，用来判断商家填账号和密码了没有
        function suReg() {
            // 获取到账号
            let account = document.getElementById('inputAccount').value;
            let password = document.getElementById('inputPassword3').value;
            let repassword = document.getElementById('inputPasswordConf').value;

            //账号以及密码都不为空的时候才能继续向下执行
            if (account == '' || password == '' || repassword == ''){
                document.getElementById('tipmess').innerHTML = '账号或者密码请填写完整';
                return;
            }else {
                // 账号和密码都不为空， 判断密码是否一致
                if (password != repassword){
                    document.getElementById('tipmess').innerHTML = '两次密码不一致';
                    return;;
                }else {
                    document.getElementById('tipmess').innerHTML = '';

                    //获取到账号
                    let account = document.getElementById('inputAccount').value;
                    //发送ajax请求，判断账号是否已经存在
                    //账号和密码都一致，判断账号是否已经存在，不存在可以注册，存在不可以注册
                    let obj = {mname:account, mpassword:password}
                    $.ajax(
                        {
                            url:'merchant/add', // 后台商家的注册地址
                            type:'post', //后台接口的请求方式
                            data:JSON.stringify(obj), //json对象转json字符串
                            dataType:'json',
                            contentType:'application/json', //前端给后端放回的数据类型 不知道加不;charset=utf-8
                            success:function (data) {
                                if (data.code == 200){
                                    //注册成功，跳转到商家登录页面
                                    document.getElementById('tipmess').innerHTML = '注册成功，请登录';
                                    return;
                                }else {
                                    //注册失败，提示账号已经存在
                                    document.getElementById('tipmess').innerHTML = '账号已存在，请重新注册';
                                    return;
                                }
                            }
                        }
                    )
                }
            }
        }
        //商家注册完毕需要登陆的函数
        function subLogin() {
            let account = document.getElementById('inputAccountLogin').value;
            let password = document.getElementById('inputPassword3Login').value;
            if (account == '' || password == ''){
                document.getElementById('tipmesslogin').innerHTML = '账号或者密码请填写完整';
                return;
            }else {
                //账号和密码都不为空, 判断数据库中是否真的存在这里的账号和密码
                let obj = {mname:account, mpassword:password}
                $.ajax(
                    {
                        url:'merchant/login', // 后台商家的登录地址
                        type:'post', //后台接口的请求方式
                       data:JSON.stringify(obj), //json对象转json字符串
                        dataType:'json',
                        contentType:'application/json', //前端给后端放回的数据类型 不知道加不;charset=utf-8
                        success:function (data) {
                            if (data.code == 200){
                                //登陆成功，界面要跳转到系统内部的主页
                                window.location.href = 'main.html';
                            }else {
                                //登录失败，提示账号或者密码不正确
                                document.getElementById('tipmesslogin').innerHTML = '账号或者密码不正确,请核实...';
                                return;
                            }
                        }
                    }
                )
            }
        }
    </script>

</head>

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">



<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>欢迎登录后台管理界面平台</span>
    <ul>
        <li><a href="#">回首页</a></li>
        <li><a href="#">帮助</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</div>

<div class="loginbody">

    <span class="systemlogo"></span>

    <div class="loginbox">

        <ul>
            <li><input name="" type="text" class="loginuser" value="" id="inputAccountLogin"/></li>
            <li><input name="" type="password" class="loginpwd" value="" id="inputPassword3Login"/>
                <span id="tipmesslogin"></span>
            </li>

            <li>
                <input name="" type="button" class="loginbtn" value="登录"  onclick="subLogin()"  />
                <!-- 商家入驻平台点击按钮显示注册模态框 -->
                    <input type="button" class="loginbtn" value="商家入驻" data-toggle="modal" data-target="#myModal"/>


                <!--
                <label><input name="" type="checkbox" value="" checked="checked" />记住密码</label><label>
                <a href="#">忘记密码？</a>
            </label>
                -->
            </li>
        </ul>


    </div>

</div>



<div class="loginbm">版权所有  2013  <a href="http://www.uimaker.com">uimaker.com</a>  仅供学习交流，勿用于任何商业用途</div>

<!-- 商家注册的模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">商家入驻平台注册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputAccount" class="col-sm-2 control-label">账号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputAccount" placeholder="请输入登陆账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPasswordConf" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPasswordConf" placeholder="请确认密码">
                        </div>
                    </div>
                    <span style="color: red" id="tipmess"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="suReg()">注册</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>
